import React, { useEffect, useState } from 'react';
import ArrowRightIcon from '@mui/icons-material/ArrowRight';
import ArrowLeftIcon from '@mui/icons-material/ArrowLeft';
import './index.less';
import { DefaultSubApi, DefaultSubjApi, FieldApi } from '@/api';
import { useLocation, useNavigate } from 'react-router-dom';
import GoBack from '@/components/goback';
import useToast from '@/utils/toast';
interface IState {
  actionCode: string;
  title: string;
}
export default function SelectPractice() {
  const location = useLocation();
  // 专科栏目默认数组
  const [subject, setSubject] = useState<Array<IHomeDataCon>>([]);
  // 是否显示侧边栏
  const [showMask, setShowMask] = useState(false);
  // 左侧大科目列表
  const [maskSub, setMaskSub] = useState<Array<IHomeDataCon>>([]);
  // 科目标题
  const [title, setTitle] = useState('');
  // 是否显示切换默认弹出框
  const [isShowSwitch, setIsShowSwitch] = useState(false);
  // 侧边栏科目默认actioncode
  const [actCode, setActCode] = useState('');
  const navigate = useNavigate();
  let toast = useToast();
  // useLocation 不能约束类型，所以只能约束里面的state的类型
  const state = location.state as IState;
  const actionCode = state.actionCode;
  // 生命周期函数
  useEffect(() => {
    DefaultSubApi({
      actionCode,
    }).then((res) => {
      console.log(res);
      setSubject(res.data);
      setTitle(state.title);
    });
  }, [actionCode, state.title]);
  // 点击弹出侧边栏
  const isShowMask = () => {
    setShowMask(true);
    let subjectData = sessionStorage.getItem('subjectData');
    if (subjectData) {
      let data = JSON.parse(subjectData);
      setMaskSub(data);
    } else {
      // 发送 获取侧边栏数据的请求
      FieldApi().then((res) => {
        console.log(res);
        setMaskSub(res.data);
        // 请求回来的数据存储到sessionstorage里面
        sessionStorage.setItem('subjectData', JSON.stringify(res.data));
      });
    }
  };
  // 点击侧边栏list 事件
  const changePage = (code: string, title: string) => {
    DefaultSubApi({
      actionCode: code,
    }).then((res) => {
      // console.log(res);
      setSubject(res.data);
      setTitle(title);
      setShowMask(false);
    });
    // 存储左侧列表的actioncode
    setActCode(code);
  };
  // 确定切换成默认学科首页事件
  const changeDef = () => {
    // 在切换默认学科的时候，需要把首页的缓存清除，不然会渲染内存中home页面的数据
    sessionStorage.removeItem('homedata');
    DefaultSubjApi({ actionCode: actCode }).then((res) => {
      // console.log(res);
      navigate(`/home`);
    });
  };
  return (
    <div className="select">
      <div className="select_top">
        <p className="tit">首页显示默认学科-{title}</p>
        <p className="default" onClick={() => setIsShowSwitch(true)}>
          设置默认学科
          <ArrowRightIcon className="icon" />
        </p>
      </div>
      <section className="select_tit">
        <h1 onClick={isShowMask}>
          <ArrowLeftIcon className="icon" />
          {title} <ArrowRightIcon className="icon" />
        </h1>
      </section>
      <section className="select_list">
        <p>专业科目</p>
        <ul>
          {subject.map((item) => (
            <li
              key={item.id}
              onClick={() => toast('warning', '该功能暂未开放')}
            >
              {item.title}
            </li>
          ))}
        </ul>
      </section>
      <div className={['mask', showMask ? 'move' : ''].join(' ')}>
        <div className="mask_left">
          <ul>
            {maskSub.map((item) => (
              <li
                key={item.id}
                onClick={() => changePage(item.actionCode, item.title)}
              >
                {item.title}
              </li>
            ))}
          </ul>
        </div>
        <div className="mask_right" onClick={() => setShowMask(false)}></div>
      </div>
      <div
        className={['switchMask', isShowSwitch ? 'showSwitchMask' : ''].join(
          ' '
        )}
      >
        <div className="switchBox">
          <p>是否切换{title}为首页默认显示？</p>
          <div className="switchBox_btm">
            <div onClick={() => setIsShowSwitch(false)}>取消</div>
            <div className="dete" onClick={changeDef}>
              确定
            </div>
          </div>
        </div>
      </div>
      <GoBack></GoBack>
    </div>
  );
}
